<template>
  <div>
    <div class="channel-edit">
      <div class="warp">
        <div class="title">
          <span>我的频道</span>
          <van-button
            @click="isEdit = !isEdit"
            plain
            type="danger"
            size="mini"
            >{{ isEdit ? '取消' : '编辑' }}</van-button
          >
        </div>
        <van-grid>
          <van-grid-item v-for="(item, index) in channelList" :key="item.id">
            <span @click="into(index)" :class="{ active: index === value }">{{
              item.name
            }}</span>
            <van-icon
              v-if="index != 0 && isEdit"
              class="close-icon"
              name="cross"
              @click="del(item, index)"
            />
          </van-grid-item>
        </van-grid>
      </div>
      <div class="warp">
        <div class="title">
          <span>可选频道</span>
        </div>
        <van-grid>
          <van-grid-item
            v-for="item in optList"
            :key="item.id"
            :text="item.name"
            @click="$emit('add', item)"
          />
          <!-- 添加频道 点击事件:点击哪一项就传到父组件的channelList中 子传父 $emit -->
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 我的频道
    channelList: {
      type: Array,
      required: true
    },
    // 全部频道
    allList: {
      type: Array,
      required: true
    },
    value: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      isEdit: false
    }
  },
  computed: {
    optList () {
      // 遍历所有频道，把不在我的频道里的频道给筛选出来
      return this.allList.filter(item => {
        // 这个item如果不在我的频道里，才筛选出来，在就不筛选
        const index = this.channelList.findIndex(v => item.id === v.id)
        // 如果找不到，会得到-1，找不到就证明不在我的频道里，那我得筛选出来
        // 就意味着我要找index === -1的，不等于-1得到false，就没有筛选出来
        return index === -1
      })
    }
  },
  methods: {
    into (index) {
      // 1. 要关闭弹出层
      this.$emit('update:editShow', false)
      // 2. 要把index传递给父
      this.$emit('input', index)
    },
    del (item, index) {
      // 点击删除频道
      this.$emit('del', item)
      // 判断 删除的下标是在当前下标的前面 让当前下标-1 往前进一步
      if (index < this.value) {
        this.$emit('input', this.value - 1)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.channel-edit {
  .warp {
    margin-bottom: 10px;
    padding: 20px;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    .close-icon {
      position: absolute;
      right: 5px;
      top: 15px;
    }
    .active {
      color: red;
    }
  }
}
</style>
